<!doctype html>
<html lang="en">
<head>
  <!--
  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  <script>
   (adsbygoogle = window.adsbygoogle || []).push({
      google_ad_client: "ca-pub-9160095348088680",
      enable_page_level_ads: true
   });
  </script>
  -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-139934361-1"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'UA-139934361-1');
  </script>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>rPlayer on Action</title>
  <meta name="description" content="rPlayer is a player play streaming radio, this player, offers the possibility to change different audio format. Example: .m3u8, .mp3, .aac." />
  <meta name="theme-color" content="#000000" />
  <link rel="icon" href="favicon.png" />
  <link rel="apple-touch-icon" href="icons-192.png" />
  <meta property="og:url" content="https://rplayer.js.org/" />
  <meta property="og:type" content="website" />
  <meta property="og:title" content="rPlayer in action" />
  <meta property="og:description" content="rPlayer is a player play streaming radio, this player, offers the possibility to change different audio format. Example: .m3u8, .mp3, .aac." />
  <meta property="og:image" content="https://rplayer.js.org/rplayer-in-action.jpg" />
  <meta property="og:image:secure_url" content="https://rplayer.js.org/rplayer-in-action.jpg" />
  <meta property="og:image:type" content="image/jpeg" />
  <meta property="og:image:width" content="1080" />
  <meta property="og:image:height" content="1080" />
  <meta property="fb:app_id" content="401821003744476"/>
  <link href="https://fonts.googleapis.com/css?family=Poppins:400,600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/w3--css@1.0.0/w3.css" integrity="sha256-Fu+tXj10rCX9//ELpE4eawJbwzshqhWQTV6b2Attp3o=" crossorigin="anonymous" media="screen and (min-width: 1024px)" />
  <style type="text/css">
    .blog-container { display: none; }

    * { box-sizing: border-box; }

    :root {
      --clr-white: #ffffff;
      --clr-black: #000000;
      --clr-flame: #f2552c;
      --clr-blue: #00477e;
      --clr-js-org: #ffe70b;
      --clr-red: #a6001a;
      --clr-green: #004d33;
      --clr-neutral-gray: #898e8c;
      --clr-marina: #4f84c4;
      --clr-yellow: #ffab00;
      --clr-tawny-port: #FF1493;
      --clr-greenery: #92B558;
    }

    html, body, .app-container, #app, .info-container, #info { margin: 0; width: 100%; height: 100%; }
    #app { display: flex; flex-direction: column; font-family: 'Poppins', sans-serif; }
    #app header { padding: 5px 10px; background-color: var(--clr-black); color: var(--clr-yellow); text-align: center; }
    #app header h1 { margin: 0; font-size: 20px; line-height: 40px; font-weight: 600; }
    #app section { flex: 1 1 auto; display: grid; grid-template-columns: repeat(2, 50%); padding: 5px 10px; }
    #app section button { color: var(--clr-white); margin: 5px 0; border: 0; font-size: 30px; cursor: pointer; }
    #app section button:nth-child(even) { margin-left: 5px; }
    #app section button:nth-child(odd) { margin-right: 5px; }
    #app section button:nth-of-type(1) { background-color: var(--clr-flame); } 
    #app section button:focus:nth-of-type(1) { outline: none; box-shadow: 0 0 0 2px var(--clr-white), 0 0 0 5px var(--clr-flame); }
    #app section button:nth-of-type(2) { background-color: var(--clr-blue); }
    #app section button:focus:nth-of-type(2) { outline: none; box-shadow: 0 0 0 2px var(--clr-white), 0 0 0 5px var(--clr-blue); }
    #app section button:nth-of-type(3) { background-color: var(--clr-js-org); color: var(--clr-black); }
    #app section button:focus:nth-of-type(3) { outline: none; box-shadow: 0 0 0 2px var(--clr-white), 0 0 0 5px var(--clr-js-org); }
    #app section button:nth-of-type(4) { background-color: var(--clr-marina); }
    #app section button:focus:nth-of-type(4) { outline: none; box-shadow: 0 0 0 2px var(--clr-white), 0 0 0 5px var(--clr-marina); }
    #app section button:nth-of-type(5) { background-color: var(--clr-yellow); color: var(--clr-black); }
    #app section button:focus:nth-of-type(5) { outline: none; box-shadow: 0 0 0 2px var(--clr-white), 0 0 0 5px var(--clr-yellow); }
    #app section button:nth-of-type(6) { background-color: var(--clr-neutral-gray); }
    #app section button:focus:nth-of-type(6) { outline: none; box-shadow: 0 0 0 2px var(--clr-white), 0 0 0 5px var(--clr-neutral-gray); }
    #app section button:nth-of-type(7) { background-color: var(--clr-green); }
    #app section button:focus:nth-of-type(7) { outline: none; box-shadow: 0 0 0 2px var(--clr-white), 0 0 0 5px var(--clr-green); }
    #app section button:nth-of-type(8) { background-color: var(--clr-red); }
    #app section button:focus:nth-of-type(8) { outline: none; box-shadow: 0 0 0 2px var(--clr-white), 0 0 0 5px var(--clr-red); }
    #app section button:nth-of-type(9) { background-color: var(--clr-tawny-port); }
    #app section button:focus:nth-of-type(9) { outline: none; box-shadow: 0 0 0 2px var(--clr-white), 0 0 0 5px var(--clr-tawny-port); }
    #app section button:nth-of-type(10) { background-color: var(--clr-greenery); color: var(--clr-black); }
    #app section button:focus:nth-of-type(10) { outline: none; box-shadow: 0 0 0 2px var(--clr-white), 0 0 0 5px var(--clr-greenery); }
    #app footer { padding: 5px 10px 10px; text-align: center; }
    #app footer a { background-color: #8a2e83; color: var(--clr-white); display: inline-block; margin-left: 10px; padding: 10px; text-decoration: none;}
    #app footer a:focus { outline: none; box-shadow: 0 0 0 2px var(--clr-white), 0 0 0 5px #8a2e83; }


    #info { background-color: var(--clr-black); color: var(--clr-white); padding: 20px; font-family: "Courier New", Courier, monospace; line-height: 1.5; }

    @media screen and (orientation: portrait) { .info-container { display: none; } }
    @media screen and (orientation: landscape) { .app-container { display: none; } }

    @media screen and (min-width: 1024px) {
      .app-container { position: fixed; display: flex; justify-content: flex-end; align-items: center; width: 33%; height: 100%; }
      .app-container #app { width: 250px; height: 500px; font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif; }
      .app-container #app button { font-size: 20px; }
      .app-container #app button:hover:nth-of-type(1) { outline: none; box-shadow: 0 0 0 2px var(--clr-white), 0 0 0 5px var(--clr-flame); }
      .app-container #app button:hover:nth-of-type(2) { outline: none; box-shadow: 0 0 0 2px var(--clr-white), 0 0 0 5px var(--clr-blue); }
      .app-container #app button:hover:nth-of-type(3) { outline: none; box-shadow: 0 0 0 2px var(--clr-white), 0 0 0 5px var(--clr-js-org); }
      .app-container #app button:hover:nth-of-type(4) { outline: none; box-shadow: 0 0 0 2px var(--clr-white), 0 0 0 5px var(--clr-marina); }
      .app-container #app button:hover:nth-of-type(5) { outline: none; box-shadow: 0 0 0 2px var(--clr-white), 0 0 0 5px var(--clr-yellow); }
      .app-container #app button:hover:nth-of-type(6) { outline: none; box-shadow: 0 0 0 2px var(--clr-white), 0 0 0 5px var(--clr-neutral-gray); }
      .app-container #app button:hover:nth-of-type(7) { outline: none; box-shadow: 0 0 0 2px var(--clr-white), 0 0 0 5px var(--clr-green); }
      .app-container #app button:hover:nth-of-type(8) { outline: none; box-shadow: 0 0 0 2px var(--clr-white), 0 0 0 5px var(--clr-red); }
      .app-container #app button:hover:nth-of-type(9) { outline: none; box-shadow: 0 0 0 2px var(--clr-white), 0 0 0 5px var(--clr-tawny-port); }
      .app-container #app button:hover:nth-of-type(10) { outline: none; box-shadow: 0 0 0 2px var(--clr-white), 0 0 0 5px var(--clr-greenery); }
      .app-container #app header { background-color: var(--clr-white); color: var(--clr-black); }

      .info-container { position: fixed; bottom: 0; left: 33%; height: 200px; z-index: 1; }
      .info-container #info { margin-left: 30px; }

      .blog-container { position: absolute; display: inline; width: 67%; margin-left: 33%; padding: 20px; margin-bottom: 200px; }
    }
  </style>
</head>
<body>
  <div class="app-container">
    <div id="app">
      <header>
        <h1>rPlayer on Action</h1>
      </header>
      <section>
        <button @click="add">Add</button>
        <button @click="rewind">Rewind</button>
        <button @click="up">Up</button>
        <button @click="down">Down</button>
        <button @click="mute">Mute</button>
        <button @click="pause">Pause</button>
        <button @click="play">Play</button>
        <button @click="stop">Stop</button>
        <button @click="hls">HLS</button>
        <button @click="mp3">MP3</button>
      </section>
      <footer>
        You listening <a href="https://www.thebeat925.ca/music/recently-played" target="_blank" rel="noreferrer noopener">The Beat 92.5</a>
      </footer>
    </div>
  </div>
  <div class="info-container">
    <div id="info">
        <div>Playing: {{ playing }}</div>
        <div>Paused: {{ paused }}</div>
        <div>Muted: {{ muted }}</div>
        <div>Volume: {{ volume }}%</div>
        <div>Source: {{ src }}</div>
        <div>HLS: {{ isHls }}</div>
        <div>Time: {{ time }}</div>
      </div>
  </div>
  <div class="blog-container">
    <div class="w3-container" style="max-width: 760px;">

      <div class="w3-panel">
        <p>rPlayer is a player play streaming radio, this player, offers the possibility to change different audio format. Example: .m3u8, .mp3, .aac.</p>
      </div>

  <div class="w3-panel w3-white">
    <h2>Easy to use</h2>
<pre class="w3-code jsHigh">
var player = new rPlayer();
</pre>

    <h2>Play</h2>
<pre class="w3-code jsHigh">
player.play('URL');
</pre>

    <h2>Stop</h2>
<pre class="w3-code jsHigh">
player.stop();
</pre>

    <h2>Pause</h2>
<pre class="w3-code jsHigh">
player.pause();
</pre>

    <h2>Mute</h2>
<pre class="w3-code jsHigh">
player.mute();
</pre>

    <h2>Set Volume</h2>
    <p>You can only set volume between 0 and 10</p>
<pre class="w3-code jsHigh notranslate">
player.volume = 7; // 7 Default set in local storage
</pre>

    <h2>timeupdate event</h2>
    <p>The <a href="//developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/timeupdate_event" rel="noreferrer" target="_blank">timeupdate event</a> is fired when the time indicated by the currentTime attribute has been updated.</p>
<pre class="w3-code jsHigh notranslate">
player.onTimeUpdate = function() {
  console.log('Time:', player.currentTime);
};
</pre>

    <h2>Infos</h2>

<pre class="w3-code jsHigh">
console.log('Playing:', player.playing);
console.log('Paused:', player.paused);
console.log('Muted:', player.muted);
console.log('Volume:', player.volume);
console.log('Source:', player.src);
console.log('Is HLS:', player.isHls);
console.log('Time:', player.currentTime);
</pre>
      </div>
    <div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js" integrity="sha256-chlNFSVx3TdcQ2Xlw7SvnbLAavAQLO0Y/LBiWX04viY=" crossorigin="anonymous"></script>
  <script type="text/javascript" src="dist/rplayer.js"></script>
  <script type="text/javascript">
    var info  = new Vue({
      el: '#info',
      data: {
        playing: false,
        volume: null,
        paused: false,
        muted: false,
        isHls: false,
        src: null,
        time: 0
      }
    });

    var app = new Vue({
      el: '#app',
      data: {
        player: null,
        url: null,
        urls: {
          mp3: 'https://cogecomedia.leanstream.co/CKBEFM-MP3',
          hls: 'https://cogecomedia.leanstream.co/cogecomedia/CKBEFM.stream/playlist.m3u8'
        }
      },
      created: function () {
        this.init();
      },
      methods: {
        init: function () {
          this.player = new rPlayer();
          this.url = this.urls.hls;

          this.log();

          var self = this;
            this.player.onTimeUpdate = function() {
            self.log();
          };
        },
        add: function () {
          const url = prompt('Add your url');

          if (Boolean(url)) {
            this.url = url;

            this.play();
          } else {
            alert('Your url is not valid!');
          }
        },
        rewind: function () {
          this.player.currentTime = this.player.currentTime - 10;

          this.log();
        },
        up: function () {
          this.player.volume += 1;

          this.log();
        },
        down: function () {
          this.player.volume -= 1;

          this.log();
        },
        mute: function () {
          this.player.mute();

          this.log();
        },
        pause: function () {
          this.player.pause();

          this.log();
        },
        play: function () {
          this.player.play(this.url);

          this.log();
        },
        stop: function () {
          this.player.stop();

          this.log();
        },
        hls: function () {
          this.url = this.urls.hls;

          this.play();
        },
        mp3: function () {
          this.url = this.urls.mp3;

          this.play();
        },
        log: function () {
          info.playing = this.player.playing;
          info.volume = this.player.volume * 10;
          info.paused = this.player.paused;
          info.muted = this.player.muted;
          info.src = this.player.src;
          info.isHls = this.player.isHls;
          info.time = this.player.currentTime;
        }
      }
    });

    // W3 code color
    if (window.matchMedia("(min-width:1024px)").matches) {
      var script = document.createElement('script');
      script.setAttribute('type', 'text/javascript');
      script.setAttribute('src', 'https://www.w3schools.com/lib/w3codecolor.js');
      script.onload = function () {
        w3CodeColor();;
      };

      document.body.appendChild(script);
    }
  </script>
</body>
</html>
